<template>
  <div>
    <el-row class="lock-btn">
      <el-button-group>
        <el-button :disabled="userState" size="medium" type="primary" @click="refresh" round>刷新</el-button>
      </el-button-group>
    </el-row>
    <el-row style="box-shadow: rgb(205 205 205) 1px 1px 8px;">
      <el-col :span="24">
        <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="invoiceTitleTable" v-loading="loading" :data="invoiceTitles" :stripe=true :row-key="'id'" :max-height="clientHeight" :height="clientHeight">
      
          <el-table-column prop="id" label="发票抬头编号" width="130" align="center" sortable fixed>
          </el-table-column>
          <!-- <el-table-column prop="owner" label="所属用户">
          </el-table-column> -->
          <el-table-column prop="type" label="发票类型" width="150" align="center" >
            <template slot-scope="scope">
            <span>{{typeOptions[scope.row.type]}}</span>
          </template>
          </el-table-column>
          <el-table-column prop="name" label="抬头" width="240" align="center" >
          </el-table-column>
          <el-table-column prop="taxNo" label="税号" width="200" align="center" >
          </el-table-column>
          <el-table-column prop="companyAddress" label="公司地址" width="200" align="center" >
          </el-table-column>
          <el-table-column prop="companyPhoneNumber" label="公司电话" width="140" align="center" >
          </el-table-column>
          <el-table-column prop="companyBank" label="公司账号银行名称" width="200" align="center" >
          </el-table-column>
          <el-table-column prop="companyBankAccount" label="公司银行账户" width="240" align="center" >
          </el-table-column>
          <!-- <el-table-column prop="recipientsAddress" label="收件人地址" width="120" align="center" >
          </el-table-column>
          <el-table-column prop="recipientsName" label="收件人名称" width="120" align="center" >
          </el-table-column> -->
          <el-table-column prop="recipientsEmail" label="收件人电子邮箱" width="240" align="center" >
          </el-table-column>
          <el-table-column prop="recipientsMobileNumber" label="收件人手机号" width="120" align="center" >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { loadInvoiceTitleApi } from "../../api/invoice.js";
import { getNickName, getTestUserName } from "../../util/auth";
export default {
  data() {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      typeOptions: {
        "0": "企业或政府事业单位",
        "1": "个人"
      },
      loading: false,
      pageNo: 1,
      pageSize: 20,
      total: 0,
      invoiceTitles: []
    };
  },
  methods: {
    loadInvoiceTitles(pageNo, pageSize) {
      let _this = this;
      _this.loading = true;
      loadInvoiceTitleApi({ pageNo: pageNo, pageSize: pageSize })
        .then(resp => {
          _this.invoiceTitles = resp.data.dataList;
          _this.total = resp.data.totalNum;
          _this.loading = false;
        })
        .catch(e => {
          this.loaded = false;
          this.loading = false;
          console.log(e);
        });
    },
    handlePageChange(pageSize) {
      this.pageSize = pageSize;
      this.loadInvoiceTitles(this.pageNo, this.pageSize);
    },
    handleNoChange(pageNo) {
      this.pageNo = pageNo;
      this.loadInvoiceTitles(this.pageNo, this.pageSize);
    },
    refresh() {
      this.loadInvoiceTitles(this.pageNo, this.pageSize);
    }
  },
  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  mounted: function() {
    this.$nextTick(function() {
      this.loadInvoiceTitles(this.pageNo, this.pageSize);
    });
  }
};
</script>
<style>
.page-tool {
  background:  rgb(237, 231, 231);
}

.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}
</style>
